<template>
  <div class="components-input-demo-presuffix">
    <a-input @click="openModal" :placeholder="placeholder" v-model="text" readOnly :disabled="disabled">
      <ych-icon slot="prefix" type="appstore" :title="$t('m.common.label.option_select')"/>
      <ych-icon v-if="value && !disabled" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
    </a-input>

    <select-fill-rule-dialog ref="selectFillRuleDialog" @selectFinished="handleOK"/>
  </div>
</template>

<script>

  import SelectFillRuleDialog from './SelectFillRuleDialog'

  export default {
    name: 'SelectFillRuleTag',
    components: {
      SelectFillRuleDialog
    },
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      value: {
        type: String,
        required: false
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      radio: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    data() {
      return {
        text: this.value
      }
    },
    watch: {
      value(value) {
        this.text = value
      },
      text() {
        this.$emit('change', this.text)
      }
    },
    methods: {
      openModal() {
        this.$refs.selectFillRuleDialog.radio = this.radio
        this.$refs.selectFillRuleDialog.visible = true
      },
      handleOK(selectedRowKeys, selectionRows) {
        let value = ''
        if (selectionRows && selectionRows.length > 0) {
          value = selectionRows.map(row => row['ruleCode']).join(',')
        }
        this.text = value
      },
      handleEmpty() {
        this.handleOK()
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style lang="less" scoped>
  .components-input-demo-presuffix .anticon-close-circle {
    cursor: pointer;
    color: #ccc;
    transition: color 0.3s;
    font-size: 12px;
  }

  .components-input-demo-presuffix .anticon-close-circle:hover {
    color: #f5222d;
  }

  .components-input-demo-presuffix .anticon-close-circle:active {
    color: #666;
  }
</style>
